<html lang="zh-CN"><head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>湘西旅游 - 账户设置</title>
  <!-- 引入Tailwind CSS -->
  <script src="https://cdn.tailwindcss.com"></script>
  <!-- 引入Font Awesome -->
  <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">

  <!-- 配置Tailwind自定义主题 -->
  <script>
    tailwind.config = {
      theme: {
        extend: {
          colors: {
            primary: '#1A4D2E',      // 湘西靛蓝 - 主色调
            secondary: '#E63946',    // 朱砂红 - 强调色
            accent: '#FFB703',       // 金色 - 点缀色
            neutral: '#F1FAEE',      // 米色 - 背景色
            dark: '#1D3557',         // 深色 - 文本
          },
          fontFamily: {
            sans: ['Inter', 'system-ui', 'sans-serif'],
            display: ['"Ma Shan Zheng"', 'cursive'],
          },
        },
      }
    }
  </script>

  <!-- 引入中文字体 -->
  <link href="https://fonts.googleapis.com/css2?family=Ma+Shan+Zheng&amp;display=swap" rel="stylesheet">

  <!-- 自定义工具类 -->
  <style type="text/tailwindcss">
    @layer utilities {
      .content-auto {
        content-visibility: auto;
      }
      .text-shadow {
        text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
      }
      .card-shadow {
        box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
      }
      .bg-pattern {
        background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 18c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm48 25c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm-43-7c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm63 31c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM34 90c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm56-76c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM12 86c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm28-65c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm23-11c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-6 60c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm29 22c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zM32 63c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm57-13c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-9-21c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM60 91c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM35 41c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM12 60c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2z' fill='%231a4d2e' fill-opacity='0.03' fill-rule='evenodd'/%3E%3C/svg%3E");
      }
      .border-pattern {
        background-image: url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0h20v20H0V0zm10 17a7 7 0 1 0 0-14 7 7 0 0 0 0 14zm20 0a7 7 0 1 0 0-14 7 7 0 0 0 0 14zM10 37a7 7 0 1 0 0-14 7 7 0 0 0 0 14zm10-17h20v20H20V20zm10 17a7 7 0 1 0 0-14 7 7 0 0 0 0 14z' fill='%23e63946' fill-opacity='0.1' fill-rule='evenodd'/%3E%3C/svg%3E");
      }
      .setting-icon {
        width: 40px;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 8px;
      }
    }
  </style>
</head>

<body class="bg-neutral bg-pattern min-h-screen text-dark">
  <!-- 成功提示弹窗 -->
  <div id="successToast" class="fixed bottom-6 right-6 bg-green-500 text-white px-6 py-3 rounded-lg shadow-lg transform translate-y-20 opacity-0 transition-all duration-300 z-50 flex items-center">
    <i class="fa fa-check-circle mr-2"></i>
    <span id="toastMessage">设置已保存</span>
  </div>

  <!-- 确认对话框 -->
  <div id="confirmDialog" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 opacity-0 pointer-events-none transition-opacity duration-300">
    <div class="bg-white rounded-xl shadow-xl w-full max-w-md transform scale-95 transition-transform duration-300">
      <div class="p-6 border-b border-gray-100">
        <h3 class="text-lg font-bold" id="dialogTitle">确认操作</h3>
      </div>
      <div class="p-6">
        <p id="dialogMessage" class="text-gray-600">您确定要执行此操作吗？</p>
      </div>
      <div class="p-4 flex justify-end space-x-3">
        <button id="dialogCancel" class="px-4 py-2 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-50 transition-colors">取消</button>
        <button id="dialogConfirm" class="px-4 py-2 bg-secondary text-white rounded-lg hover:bg-secondary/90 transition-colors">确认</button>
      </div>
    </div>
  </div>

  <main class="container mx-auto px-4 py-8">
    <!-- 页面标题 -->
    <div class="text-center mb-10 relative overflow-hidden rounded-lg">
      <div class="absolute inset-0 bg-cover bg-center opacity-20" style="background-image: url('https://picsum.photos/id/1043/1200/300');"></div>
      <h2 class="text-[clamp(1.8rem,5vw,2.8rem)] font-display text-primary relative z-10 py-8">账户设置</h2>
      <div class="h-1 w-32 bg-secondary mx-auto relative z-10"></div>
      <p class="text-gray-600 mt-4 relative z-10">管理您的个人信息、隐私和通知偏好</p>
    </div>

    <div class="grid grid-cols-1 lg:grid-cols-4 gap-8">
      <!-- 左侧：设置导航 -->
      <div class="lg:col-span-1">
        <div class="bg-white rounded-xl shadow-lg overflow-hidden sticky top-6">
          <!-- 用户信息头部 -->
          <div class="h-36 bg-primary relative">
            <div class="absolute inset-0 opacity-20 bg-cover bg-center" style="background-image: url('https://picsum.photos/id/1039/600/400');"></div>
            <!-- 头像 -->
            <div class="absolute -bottom-16 left-8">
              <div class="w-32 h-32 rounded-full border-4 border-white overflow-hidden shadow-lg">
                <img src="https://picsum.photos/id/64/200/200" alt="用户头像" class="w-full h-full object-cover">
              </div>
            </div>
          </div>

          <!-- 用户信息内容 -->
          <div class="pt-20 pb-6 px-6">
            <div class="text-center mb-6">
              <h3 class="text-xl font-bold">湘西旅行者</h3>
              <p class="text-gray-500 text-sm mt-1">已探索 8 个湘西景点</p>
            </div>
          </div>

          <!-- 设置导航菜单 -->
          <div class="border-t border-gray-100">
            <ul class="divide-y divide-gray-100">
              <li>
                <a href="#profile" class="setting-nav-link flex items-center px-6 py-4 text-primary bg-primary/5">
                  <div class="setting-icon bg-primary/10 text-primary mr-4">
                    <i class="fa fa-user"></i>
                  </div>
                  <span>个人资料</span>
                </a>
              </li>
              <li>
                <a href="#security" class="setting-nav-link flex items-center px-6 py-4 text-gray-600 hover:bg-gray-50">
                  <div class="setting-icon bg-gray-100 text-gray-600 mr-4">
                    <i class="fa fa-lock"></i>
                  </div>
                  <span>账号安全</span>
                </a>
              </li>
              <li>
                <a href="#notifications" class="setting-nav-link flex items-center px-6 py-4 text-gray-600 hover:bg-gray-50">
                  <div class="setting-icon bg-gray-100 text-gray-600 mr-4">
                    <i class="fa fa-bell"></i>
                  </div>
                  <span>通知设置</span>
                </a>
              </li>
              <li>
                <a href="#privacy" class="setting-nav-link flex items-center px-6 py-4 text-gray-600 hover:bg-gray-50">
                  <div class="setting-icon bg-gray-100 text-gray-600 mr-4">
                    <i class="fa fa-shield"></i>
                  </div>
                  <span>隐私设置</span>
                </a>
              </li>
              <li>
                <a href="#preferences" class="setting-nav-link flex items-center px-6 py-4 text-gray-600 hover:bg-gray-50">
                  <div class="setting-icon bg-gray-100 text-gray-600 mr-4">
                    <i class="fa fa-sliders"></i>
                  </div>
                  <span>偏好设置</span>
                </a>
              </li>
              <li>
                <a href="#account" class="setting-nav-link flex items-center px-6 py-4 text-gray-600 hover:bg-gray-50">
                  <div class="setting-icon bg-gray-100 text-gray-600 mr-4">
                    <i class="fa fa-cog"></i>
                  </div>
                  <span>账户管理</span>
                </a>
              </li>
            </ul>
          </div>
        </div>
      </div>

      <!-- 右侧：设置内容区 -->
      <div class="lg:col-span-3 space-y-8">
        <!-- 个人资料设置 -->
        <section id="profile" class="bg-white rounded-xl shadow-lg overflow-hidden">
          <div class="border-b border-gray-100 px-6 py-4">
            <h3 class="text-xl font-bold flex items-center">
              <i class="fa fa-user text-primary mr-2"></i> 个人资料
            </h3>
          </div>

          <div class="p-6">
            <form id="profileForm" class="space-y-6">
              <!-- 头像设置 -->
              <div class="grid grid-cols-1 md:grid-cols-3 gap-6 items-center">
                <div>
                  <label class="block text-sm font-medium text-gray-700 mb-2">头像</label>
                  <div class="relative">
                    <div class="w-32 h-32 rounded-full overflow-hidden border-4 border-gray-100">
                      <img id="avatarPreview" src="https://picsum.photos/id/64/200/200" alt="当前头像" class="w-full h-full object-cover">
                    </div>
                    <button type="button" id="changeAvatarBtn" class="absolute bottom-0 right-0 w-10 h-10 bg-primary text-white rounded-full flex items-center justify-center shadow-md hover:bg-primary/90 transition-colors">
                      <i class="fa fa-camera"></i>
                    </button>
                    <input type="file" id="avatarInput" accept="image/*" class="hidden">
                  </div>
                  <p class="text-xs text-gray-500 mt-2">支持 JPG、PNG 格式，建议尺寸 200x200px</p>
                </div>

                <div class="md:col-span-2 space-y-4">
                  <div>
                    <label for="username" class="block text-sm font-medium text-gray-700 mb-1">用户名</label>
                    <input type="text" id="username" name="username" value="湘西旅行者" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary/50 focus:border-primary outline-none transition-colors">
                  </div>

                  <div>
                    <label for="nickname" class="block text-sm font-medium text-gray-700 mb-1">昵称</label>
                    <input type="text" id="nickname" name="nickname" value="山水探索者" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary/50 focus:border-primary outline-none transition-colors">
                  </div>
                </div>
              </div>

              <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <div>
                  <label for="gender" class="block text-sm font-medium text-gray-700 mb-1">性别</label>
                  <select id="gender" name="gender" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary/50 focus:border-primary outline-none transition-colors">
                    <option value="male" selected="">男</option>
                    <option value="female">女</option>
                    <option value="secret">保密</option>
                  </select>
                </div>

                <div>
                  <label for="birthday" class="block text-sm font-medium text-gray-700 mb-1">生日</label>
                  <input type="date" id="birthday" name="birthday" value="1990-05-15" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary/50 focus:border-primary outline-none transition-colors">
                </div>
              </div>

              <div>
                <label for="bio" class="block text-sm font-medium text-gray-700 mb-1">个人简介</label>
                <textarea id="bio" name="bio" rows="3" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary/50 focus:border-primary outline-none transition-colors">喜欢徒步旅行，探索湘西的神秘山水与民族文化，分享旅途中的美好体验。</textarea>
                <p class="text-xs text-gray-500 mt-1">最多可输入 200 个字符</p>
              </div>

              <div>
                <label for="interests" class="block text-sm font-medium text-gray-700 mb-1">旅行偏好</label>
                <div class="flex flex-wrap gap-3 mt-2">
                  <label class="inline-flex items-center">
                    <input type="checkbox" name="interests" value="hiking" checked="" class="w-4 h-4 text-primary focus:ring-primary border-gray-300 rounded">
                    <span class="ml-2 text-sm">徒步旅行</span>
                  </label>
                  <label class="inline-flex items-center">
                    <input type="checkbox" name="interests" value="photography" checked="" class="w-4 h-4 text-primary focus:ring-primary border-gray-300 rounded">
                    <span class="ml-2 text-sm">摄影</span>
                  </label>
                  <label class="inline-flex items-center">
                    <input type="checkbox" name="interests" value="culture" checked="" class="w-4 h-4 text-primary focus:ring-primary border-gray-300 rounded">
                    <span class="ml-2 text-sm">文化体验</span>
                  </label>
                  <label class="inline-flex items-center">
                    <input type="checkbox" name="interests" value="food" class="w-4 h-4 text-primary focus:ring-primary border-gray-300 rounded">
                    <span class="ml-2 text-sm">美食探索</span>
                  </label>
                  <label class="inline-flex items-center">
                    <input type="checkbox" name="interests" value="architecture" class="w-4 h-4 text-primary focus:ring-primary border-gray-300 rounded">
                    <span class="ml-2 text-sm">建筑观光</span>
                  </label>
                  <label class="inline-flex items-center">
                    <input type="checkbox" name="interests" value="nature" checked="" class="w-4 h-4 text-primary focus:ring-primary border-gray-300 rounded">
                    <span class="ml-2 text-sm">自然风光</span>
                  </label>
                </div>
              </div>

              <div class="flex justify-end pt-4 border-t border-gray-100">
                <button type="button" id="cancelProfileBtn" class="px-6 py-2 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-50 mr-3 transition-colors">取消</button>
                <button type="submit" class="px-6 py-2 bg-primary text-white rounded-lg hover:bg-primary/90 transition-colors">保存更改</button>
              </div>
            </form>
          </div>
        </section>

        <!-- 账号安全设置 -->
        <section id="security" class="bg-white rounded-xl shadow-lg overflow-hidden hidden">
          <div class="border-b border-gray-100 px-6 py-4">
            <h3 class="text-xl font-bold flex items-center">
              <i class="fa fa-lock text-primary mr-2"></i> 账号安全
            </h3>
          </div>

          <div class="p-6 space-y-6">
            <!-- 登录密码 -->
            <div class="flex flex-col md:flex-row md:items-center justify-between p-4 border border-gray-100 rounded-lg hover:shadow-sm transition-shadow">
              <div>
                <h4 class="font-medium">登录密码</h4>
                <p class="text-sm text-gray-500 mt-1">上次修改于 3 个月前</p>
              </div>
              <button id="changePasswordBtn" class="mt-3 md:mt-0 px-4 py-2 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-50 transition-colors text-sm">
                修改密码
              </button>
            </div>

            <!-- 手机号码 -->
            <div class="flex flex-col md:flex-row md:items-center justify-between p-4 border border-gray-100 rounded-lg hover:shadow-sm transition-shadow">
              <div>
                <h4 class="font-medium">手机号码</h4>
                <p class="text-sm text-gray-500 mt-1">已绑定: 138****5678</p>
              </div>
              <button class="mt-3 md:mt-0 px-4 py-2 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-50 transition-colors text-sm">
                更换号码
              </button>
            </div>

            <!-- 电子邮箱 -->
            <div class="flex flex-col md:flex-row md:items-center justify-between p-4 border border-gray-100 rounded-lg hover:shadow-sm transition-shadow">
              <div>
                <h4 class="font-medium">电子邮箱</h4>
                <p class="text-sm text-gray-500 mt-1">已验证: tra***@example.com</p>
              </div>
              <button class="mt-3 md:mt-0 px-4 py-2 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-50 transition-colors text-sm">
                更换邮箱
              </button>
            </div>

            <!-- 登录记录 -->
            <div>
              <h4 class="font-medium mb-4">最近登录记录</h4>
              <div class="overflow-x-auto">
                <table class="min-w-full divide-y divide-gray-200">
                  <thead>
                    <tr>
                      <th class="px-4 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">登录时间</th>
                      <th class="px-4 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">登录地点</th>
                      <th class="px-4 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">设备</th>
                      <th class="px-4 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">状态</th>
                    </tr>
                  </thead>
                  <tbody class="bg-white divide-y divide-gray-200">
                    <tr>
                      <td class="px-4 py-3 text-sm">今天 09:23</td>
                      <td class="px-4 py-3 text-sm">湖南省长沙市</td>
                      <td class="px-4 py-3 text-sm">Chrome / Windows 10</td>
                      <td class="px-4 py-3 text-sm"><span class="px-2 py-1 text-xs rounded-full bg-green-100 text-green-800">当前登录</span></td>
                    </tr>
                    <tr>
                      <td class="px-4 py-3 text-sm">昨天 20:15</td>
                      <td class="px-4 py-3 text-sm">湖南省张家界市</td>
                      <td class="px-4 py-3 text-sm">Safari / iOS 16</td>
                      <td class="px-4 py-3 text-sm"><span class="px-2 py-1 text-xs rounded-full bg-gray-100 text-gray-800">已退出</span></td>
                    </tr>
                    <tr>
                      <td class="px-4 py-3 text-sm">2023-10-15 14:32</td>
                      <td class="px-4 py-3 text-sm">湖南省湘西州</td>
                      <td class="px-4 py-3 text-sm">Firefox / Android 13</td>
                      <td class="px-4 py-3 text-sm"><span class="px-2 py-1 text-xs rounded-full bg-gray-100 text-gray-800">已退出</span></td>
                    </tr>
                  </tbody>
                </table>
              </div>
            </div>
          </div>
        </section>

        <!-- 通知设置 -->
        <section id="notifications" class="bg-white rounded-xl shadow-lg overflow-hidden hidden">
          <div class="border-b border-gray-100 px-6 py-4">
            <h3 class="text-xl font-bold flex items-center">
              <i class="fa fa-bell text-primary mr-2"></i> 通知设置
            </h3>
          </div>

          <div class="p-6 space-y-6">
            <!-- 通知方式 -->
            <div>
              <h4 class="font-medium mb-4">通知方式</h4>
              <div class="space-y-4">
                <div class="flex items-center justify-between">
                  <div>
                    <h5 class="text-sm font-medium">站内消息</h5>
                    <p class="text-xs text-gray-500">在网站内接收通知</p>
                  </div>
                  <label class="relative inline-flex items-center cursor-pointer">
                    <input type="checkbox" checked="" class="sr-only peer">
                    <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-2 peer-focus:ring-primary/50 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-primary"></div>
                  </label>
                </div>

                <div class="flex items-center justify-between">
                  <div>
                    <h5 class="text-sm font-medium">邮件通知</h5>
                    <p class="text-xs text-gray-500">通过邮件接收重要通知</p>
                  </div>
                  <label class="relative inline-flex items-center cursor-pointer">
                    <input type="checkbox" checked="" class="sr-only peer">
                    <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-2 peer-focus:ring-primary/50 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-primary"></div>
                  </label>
                </div>

                <div class="flex items-center justify-between">
                  <div>
                    <h5 class="text-sm font-medium">短信通知</h5>
                    <p class="text-xs text-gray-500">通过短信接收重要通知</p>
                  </div>
                  <label class="relative inline-flex items-center cursor-pointer">
                    <input type="checkbox" class="sr-only peer">
                    <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-2 peer-focus:ring-primary/50 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-primary"></div>
                  </label>
                </div>
              </div>
            </div>

            <div class="pt-6 border-t border-gray-100">
              <h4 class="font-medium mb-4">通知类型</h4>

              <!-- 景点相关 -->
              <div class="mb-6">
                <h5 class="text-sm font-medium mb-3 flex items-center">
                  <i class="fa fa-map-marker text-primary mr-2"></i> 景点相关
                </h5>
                <div class="space-y-3 pl-6">
                  <div class="flex items-center justify-between">
                    <div>
                      <h6 class="text-sm">景点开放状态变更</h6>
                      <p class="text-xs text-gray-500">关注的景点开放状态变更时通知</p>
                    </div>
                    <label class="relative inline-flex items-center cursor-pointer">
                      <input type="checkbox" checked="" class="sr-only peer">
                      <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-2 peer-focus:ring-primary/50 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-primary"></div>
                    </label>
                  </div>

                  <div class="flex items-center justify-between">
                    <div>
                      <h6 class="text-sm">景点活动通知</h6>
                      <p class="text-xs text-gray-500">关注的景点举办活动时通知</p>
                    </div>
                    <label class="relative inline-flex items-center cursor-pointer">
                      <input type="checkbox" checked="" class="sr-only peer">
                      <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-2 peer-focus:ring-primary/50 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-primary"></div>
                    </label>
                  </div>
                </div>
              </div>

              <!-- 互动相关 -->
              <div class="mb-6">
                <h5 class="text-sm font-medium mb-3 flex items-center">
                  <i class="fa fa-comments text-primary mr-2"></i> 互动相关
                </h5>
                <div class="space-y-3 pl-6">
                  <div class="flex items-center justify-between">
                    <div>
                      <h6 class="text-sm">评论与回复</h6>
                      <p class="text-xs text-gray-500">有人评论或回复您的内容时通知</p>
                    </div>
                    <label class="relative inline-flex items-center cursor-pointer">
                      <input type="checkbox" checked="" class="sr-only peer">
                      <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-2 peer-focus:ring-primary/50 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-primary"></div>
                    </label>
                  </div>

                  <div class="flex items-center justify-between">
                    <div>
                      <h6 class="text-sm">点赞与收藏</h6>
                      <p class="text-xs text-gray-500">有人点赞或收藏您的内容时通知</p>
                    </div>
                    <label class="relative inline-flex items-center cursor-pointer">
                      <input type="checkbox" checked="" class="sr-only peer">
                      <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-2 peer-focus:ring-primary/50 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-primary"></div>
                    </label>
                  </div>
                </div>
              </div>

              <!-- 系统相关 -->
              <div>
                <h5 class="text-sm font-medium mb-3 flex items-center">
                  <i class="fa fa-info-circle text-primary mr-2"></i> 系统相关
                </h5>
                <div class="space-y-3 pl-6">
                  <div class="flex items-center justify-between">
                    <div>
                      <h6 class="text-sm">系统公告</h6>
                      <p class="text-xs text-gray-500">接收网站重要公告和更新信息</p>
                    </div>
                    <label class="relative inline-flex items-center cursor-pointer">
                      <input type="checkbox" checked="" class="sr-only peer">
                      <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-2 peer-focus:ring-primary/50 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-primary"></div>
                    </label>
                  </div>

                  <div class="flex items-center justify-between">
                    <div>
                      <h6 class="text-sm">旅游资讯</h6>
                      <p class="text-xs text-gray-500">接收湘西旅游相关资讯和攻略</p>
                    </div>
                    <label class="relative inline-flex items-center cursor-pointer">
                      <input type="checkbox" class="sr-only peer">
                      <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-2 peer-focus:ring-primary/50 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-primary"></div>
                    </label>
                  </div>
                </div>
              </div>
            </div>

            <div class="flex justify-end pt-6 border-t border-gray-100">
              <button id="resetNotificationsBtn" class="px-6 py-2 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-50 mr-3 transition-colors">重置默认</button>
              <button id="saveNotificationsBtn" class="px-6 py-2 bg-primary text-white rounded-lg hover:bg-primary/90 transition-colors">保存设置</button>
            </div>
          </div>
        </section>

        <!-- 隐私设置 -->
        <section id="privacy" class="bg-white rounded-xl shadow-lg overflow-hidden hidden">
          <div class="border-b border-gray-100 px-6 py-4">
            <h3 class="text-xl font-bold flex items-center">
              <i class="fa fa-shield text-primary mr-2"></i> 隐私设置
            </h3>
          </div>

          <div class="p-6 space-y-6">
            <!-- 个人资料可见性 -->
            <div>
              <h4 class="font-medium mb-4">个人资料可见性</h4>

              <div class="space-y-4">
                <div>
                  <label class="block text-sm font-medium text-gray-700 mb-1">谁可以看到我的个人资料</label>
                  <select class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary/50 focus:border-primary outline-none transition-colors">
                    <option value="public">所有人</option>
                    <option value="registered" selected="">仅注册用户</option>
                    <option value="friends">仅关注我的人</option>
                    <option value="private">仅自己</option>
                  </select>
                </div>

                <div class="flex items-center justify-between">
                  <div>
                    <h5 class="text-sm font-medium">显示我的旅行足迹</h5>
                    <p class="text-xs text-gray-500">展示我去过的湘西景点</p>
                  </div>
                  <label class="relative inline-flex items-center cursor-pointer">
                    <input type="checkbox" checked="" class="sr-only peer">
                    <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-2 peer-focus:ring-primary/50 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-primary"></div>
                  </label>
                </div>

                <div class="flex items-center justify-between">
                  <div>
                    <h5 class="text-sm font-medium">显示我的收藏内容</h5>
                    <p class="text-xs text-gray-500">展示我收藏的景点和攻略</p>
                  </div>
                  <label class="relative inline-flex items-center cursor-pointer">
                    <input type="checkbox" class="sr-only peer">
                    <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-2 peer-focus:ring-primary/50 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-primary"></div>
                  </label>
                </div>
              </div>
            </div>

            <div class="pt-6 border-t border-gray-100">
              <h4 class="font-medium mb-4">数据分享设置</h4>

              <div class="space-y-4">
                <div class="flex items-center justify-between">
                  <div>
                    <h5 class="text-sm font-medium">允许景点商家联系我</h5>
                    <p class="text-xs text-gray-500">基于我的旅行偏好接收相关景点信息</p>
                  </div>
                  <label class="relative inline-flex items-center cursor-pointer">
                    <input type="checkbox" class="sr-only peer">
                    <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-2 peer-focus:ring-primary/50 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-primary"></div>
                  </label>
                </div>

                <div class="flex items-center justify-between">
                  <div>
                    <h5 class="text-sm font-medium">分享我的旅行评价</h5>
                    <p class="text-xs text-gray-500">将我的评价分享给合作伙伴用于推广</p>
                  </div>
                  <label class="relative inline-flex items-center cursor-pointer">
                    <input type="checkbox" checked="" class="sr-only peer">
                    <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-2 peer-focus:ring-primary/50 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-primary"></div>
                  </label>
                </div>
              </div>
            </div>

            <div class="pt-6 border-t border-gray-100">
              <h4 class="font-medium mb-4">数据管理</h4>

              <div class="space-y-4">
                <button id="exportDataBtn" class="w-full flex items-center justify-between p-4 border border-gray-100 rounded-lg hover:bg-gray-50 transition-colors">
                  <div>
                    <h5 class="text-sm font-medium">导出我的数据</h5>
                    <p class="text-xs text-gray-500">获取我的旅行记录、收藏和评价数据</p>
                  </div>
                  <i class="fa fa-download text-primary"></i>
                </button>

                <button id="deleteDataBtn" class="w-full flex items-center justify-between p-4 border border-red-100 rounded-lg hover:bg-red-50 transition-colors">
                  <div>
                    <h5 class="text-sm font-medium text-red-600">删除我的部分数据</h5>
                    <p class="text-xs text-gray-500">选择要删除的旅行记录和评价</p>
                  </div>
                  <i class="fa fa-trash text-red-500"></i>
                </button>
              </div>
            </div>

            <div class="flex justify-end pt-6 border-t border-gray-100">
              <button id="savePrivacyBtn" class="px-6 py-2 bg-primary text-white rounded-lg hover:bg-primary/90 transition-colors">保存设置</button>
            </div>
          </div>
        </section>

        <!-- 偏好设置 -->
        <section id="preferences" class="bg-white rounded-xl shadow-lg overflow-hidden hidden">
          <div class="border-b border-gray-100 px-6 py-4">
            <h3 class="text-xl font-bold flex items-center">
              <i class="fa fa-sliders text-primary mr-2"></i> 偏好设置
            </h3>
          </div>

          <div class="p-6 space-y-6">
            <!-- 界面设置 -->
            <div>
              <h4 class="font-medium mb-4">界面设置</h4>

              <div class="space-y-4">
                <div>
                  <label class="block text-sm font-medium text-gray-700 mb-1">主题模式</label>
                  <select id="themeMode" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary/50 focus:border-primary outline-none transition-colors">
                    <option value="light" selected="">浅色模式</option>
                    <option value="dark">深色模式</option>
                    <option value="auto">跟随系统</option>
                  </select>
                </div>

                <div>
                  <label class="block text-sm font-medium text-gray-700 mb-1">默认首页展示</label>
                  <select class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary/50 focus:border-primary outline-none transition-colors">
                    <option value="recommended" selected="">推荐内容</option>
                    <option value="attractions">景点大全</option>
                    <option value="guides">旅游攻略</option>
                    <option value="activities">最新活动</option>
                  </select>
                </div>
              </div>
            </div>

            <div class="pt-6 border-t border-gray-100">
              <h4 class="font-medium mb-4">旅行偏好</h4>

              <div class="space-y-4">
                <div>
                  <label class="block text-sm font-medium text-gray-700 mb-2">感兴趣的景点类型</label>
                  <div class="flex flex-wrap gap-3">
                    <label class="inline-flex items-center">
                      <input type="checkbox" checked="" class="w-4 h-4 text-primary focus:ring-primary border-gray-300 rounded">
                      <span class="ml-2 text-sm">自然风光</span>
                    </label>
                    <label class="inline-flex items-center">
                      <input type="checkbox" checked="" class="w-4 h-4 text-primary focus:ring-primary border-gray-300 rounded">
                      <span class="ml-2 text-sm">古镇村落</span>
                    </label>
                    <label class="inline-flex items-center">
                      <input type="checkbox" class="w-4 h-4 text-primary focus:ring-primary border-gray-300 rounded">
                      <span class="ml-2 text-sm">民俗文化</span>
                    </label>
                    <label class="inline-flex items-center">
                      <input type="checkbox" checked="" class="w-4 h-4 text-primary focus:ring-primary border-gray-300 rounded">
                      <span class="ml-2 text-sm">徒步探险</span>
                    </label>
                    <label class="inline-flex items-center">
                      <input type="checkbox" class="w-4 h-4 text-primary focus:ring-primary border-gray-300 rounded">
                      <span class="ml-2 text-sm">美食体验</span>
                    </label>
                    <label class="inline-flex items-center">
                      <input type="checkbox" class="w-4 h-4 text-primary focus:ring-primary border-gray-300 rounded">
                      <span class="ml-2 text-sm">历史古迹</span>
                    </label>
                  </div>
                </div>

                <div>
                  <label class="block text-sm font-medium text-gray-700 mb-2">关注的湘西地区</label>
                  <div class="flex flex-wrap gap-3">
                    <label class="inline-flex items-center">
                      <input type="checkbox" checked="" class="w-4 h-4 text-primary focus:ring-primary border-gray-300 rounded">
                      <span class="ml-2 text-sm">凤凰县</span>
                    </label>
                    <label class="inline-flex items-center">
                      <input type="checkbox" checked="" class="w-4 h-4 text-primary focus:ring-primary border-gray-300 rounded">
                      <span class="ml-2 text-sm">张家界</span>
                    </label>
                    <label class="inline-flex items-center">
                      <input type="checkbox" class="w-4 h-4 text-primary focus:ring-primary border-gray-300 rounded">
                      <span class="ml-2 text-sm">永顺县</span>
                    </label>
                    <label class="inline-flex items-center">
                      <input type="checkbox" class="w-4 h-4 text-primary focus:ring-primary border-gray-300 rounded">
                      <span class="ml-2 text-sm">吉首市</span>
                    </label>
                    <label class="inline-flex items-center">
                      <input type="checkbox" class="w-4 h-4 text-primary focus:ring-primary border-gray-300 rounded">
                      <span class="ml-2 text-sm">龙山县</span>
                    </label>
                  </div>
                </div>

                <div>
                  <label class="block text-sm font-medium text-gray-700 mb-1">旅行预算偏好</label>
                  <select class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary/50 focus:border-primary outline-none transition-colors">
                    <option value="budget">经济型</option>
                    <option value="mid" selected="">舒适型</option>
                    <option value="luxury">豪华型</option>
                    <option value="any">不限</option>
                  </select>
                </div>
              </div>
            </div>

            <div class="flex justify-end pt-6 border-t border-gray-100">
              <button id="resetPreferencesBtn" class="px-6 py-2 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-50 mr-3 transition-colors">重置默认</button>
              <button id="savePreferencesBtn" class="px-6 py-2 bg-primary text-white rounded-lg hover:bg-primary/90 transition-colors">保存设置</button>
            </div>
          </div>
        </section>

        <!-- 账户管理 -->
        <section id="account" class="bg-white rounded-xl shadow-lg overflow-hidden hidden">
          <div class="border-b border-gray-100 px-6 py-4">
            <h3 class="text-xl font-bold flex items-center">
              <i class="fa fa-cog text-primary mr-2"></i> 账户管理
            </h3>
          </div>

          <div class="p-6 space-y-6">
            <!-- 账号信息 -->
            <div class="p-4 border border-gray-100 rounded-lg">
              <h4 class="font-medium mb-3">账号信息</h4>
              <div class="space-y-2 text-sm">
                <div class="flex justify-between">
                  <span class="text-gray-500">账号注册时间</span>
                  <span>2022年5月18日</span>
                </div>
                <div class="flex justify-between">
                  <span class="text-gray-500">账号状态</span>
                  <span class="text-green-600">正常</span>
                </div>
                <div class="flex justify-between">
                  <span class="text-gray-500">会员等级</span>
                  <span>湘西探索者 Lv.3</span>
                </div>
                <div class="flex justify-between">
                  <span class="text-gray-500">会员到期时间</span>
                  <span>2024年3月25日</span>
                </div>
              </div>
            </div>

            <!-- 第三方账号绑定 -->
            <div>
              <h4 class="font-medium mb-4">第三方账号绑定</h4>

              <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                <div class="p-4 border border-gray-100 rounded-lg text-center hover:shadow-sm transition-shadow">
                  <div class="w-12 h-12 bg-blue-100 text-blue-600 rounded-full flex items-center justify-center mx-auto mb-3">
                    <i class="fa fa-weixin text-xl"></i>
                  </div>
                  <h5 class="text-sm font-medium mb-1">微信</h5>
                  <button class="text-xs text-primary hover:text-primary/80 transition-colors">绑定</button>
                </div>

                <div class="p-4 border border-gray-100 rounded-lg text-center hover:shadow-sm transition-shadow">
                  <div class="w-12 h-12 bg-red-100 text-red-600 rounded-full flex items-center justify-center mx-auto mb-3">
                    <i class="fa fa-weibo text-xl"></i>
                  </div>
                  <h5 class="text-sm font-medium mb-1">微博</h5>
                  <button class="text-xs text-primary hover:text-primary/80 transition-colors">绑定</button>
                </div>

                <div class="p-4 border border-gray-100 rounded-lg text-center hover:shadow-sm transition-shadow">
                  <div class="w-12 h-12 bg-orange-100 text-orange-600 rounded-full flex items-center justify-center mx-auto mb-3">
                    <i class="fa fa-qq text-xl"></i>
                  </div>
                  <h5 class="text-sm font-medium mb-1">QQ</h5>
                  <span class="text-xs text-green-600">已绑定</span>
                </div>
              </div>
            </div>

            <!-- 账号操作 -->
            <div class="pt-6 border-t border-gray-100">
              <h4 class="font-medium mb-4">账号操作</h4>

              <div class="space-y-4">
                <button id="deactivateAccountBtn" class="w-full flex items-center justify-between p-4 border border-yellow-100 rounded-lg hover:bg-yellow-50 transition-colors">
                  <div>
                    <h5 class="text-sm font-medium text-yellow-700">暂时停用账号</h5>
                    <p class="text-xs text-gray-500">停用期间无法登录，数据将被保留</p>
                  </div>
                  <i class="fa fa-pause text-yellow-500"></i>
                </button>

                <button id="deleteAccountBtn" class="w-full flex items-center justify-between p-4 border border-red-100 rounded-lg hover:bg-red-50 transition-colors">
                  <div>
                    <h5 class="text-sm font-medium text-red-600">永久删除账号</h5>
                    <p class="text-xs text-gray-500">删除后所有数据将无法恢复</p>
                  </div>
                  <i class="fa fa-exclamation-triangle text-red-500"></i>
                </button>
              </div>
            </div>
          </div>
        </section>
      </div>
    </div>
  </main>

  <!-- 页脚 -->
  <footer class="bg-primary text-white mt-16 border-pattern">
    <div class="container mx-auto px-4 py-10">
      <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
        <div>
          <h3 class="text-xl font-display mb-4">湘西之旅</h3>
          <p class="text-gray-300 text-sm">探索湘西秘境，感受土家族、苗族文化魅力，发现不一样的湖南西部风情。</p>
          <div class="flex space-x-4 mt-4">
            <a href="#" class="text-gray-300 hover:text-accent transition-colors">
              <i class="fa fa-weibo"></i>
            </a>
            <a href="#" class="text-gray-300 hover:text-accent transition-colors">
              <i class="fa fa-wechat"></i>
            </a>
            <a href="#" class="text-gray-300 hover:text-accent transition-colors">
              <i class="fa fa-instagram"></i>
            </a>
            <a href="#" class="text-gray-300 hover:text-accent transition-colors">
              <i class="fa fa-youtube-play"></i>
            </a>
          </div>
        </div>

        <div>
          <h4 class="text-lg font-medium mb-4">快速链接</h4>
          <ul class="space-y-2 text-sm text-gray-300">
            <li><a href="#" class="hover:text-accent transition-colors">首页</a></li>
            <li><a href="#" class="hover:text-accent transition-colors">景点大全</a></li>
            <li><a href="#" class="hover:text-accent transition-colors">旅游攻略</a></li>
            <li><a href="#" class="hover:text-accent transition-colors">美食推荐</a></li>
            <li><a href="#" class="hover:text-accent transition-colors">民俗文化</a></li>
          </ul>
        </div>

        <div>
          <h4 class="text-lg font-medium mb-4">热门目的地</h4>
          <ul class="space-y-2 text-sm text-gray-300">
            <li><a href="#" class="hover:text-accent transition-colors">凤凰古城</a></li>
            <li><a href="#" class="hover:text-accent transition-colors">张家界</a></li>
            <li><a href="#" class="hover:text-accent transition-colors">芙蓉镇</a></li>
            <li><a href="#" class="hover:text-accent transition-colors">德夯苗寨</a></li>
            <li><a href="#" class="hover:text-accent transition-colors">里耶古城</a></li>
          </ul>
        </div>

        <div>
          <h4 class="text-lg font-medium mb-4">联系我们</h4>
          <ul class="space-y-2 text-sm text-gray-300">
            <li class="flex items-start">
              <i class="fa fa-map-marker mt-1 mr-2"></i>
              <span>湖南省湘西土家族苗族自治州吉首市</span>
            </li>
            <li class="flex items-center">
              <i class="fa fa-phone mr-2"></i>
              <span>400-123-4567</span>
            </li>
            <li class="flex items-center">
              <i class="fa fa-envelope mr-2"></i>
              <span>info@xiangxitrip.com</span>
            </li>
          </ul>
        </div>
      </div>

      <div class="border-t border-gray-700 mt-8 pt-6 text-center text-sm text-gray-400">
        <p>© 2023 湘西之旅 版权所有 | 湘ICP备12345678号</p>
      </div>
    </div>
  </footer>

  <!-- 修改密码模态框 -->
  <div id="passwordModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 opacity-0 pointer-events-none transition-opacity duration-300">
    <div class="bg-white rounded-xl shadow-xl w-full max-w-md transform scale-95 transition-transform duration-300">
      <div class="p-6 border-b border-gray-100 flex justify-between items-center">
        <h3 class="text-lg font-bold">修改密码</h3>
        <button id="closePasswordModal" class="text-gray-400 hover:text-gray-600">
          <i class="fa fa-times"></i>
        </button>
      </div>
      <div class="p-6">
        <form id="passwordForm" class="space-y-4">
          <div>
            <label for="currentPassword" class="block text-sm font-medium text-gray-700 mb-1">当前密码</label>
            <input type="password" id="currentPassword" name="currentPassword" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary/50 focus:border-primary outline-none transition-colors">
          </div>

          <div>
            <label for="newPassword" class="block text-sm font-medium text-gray-700 mb-1">新密码</label>
            <input type="password" id="newPassword" name="newPassword" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary/50 focus:border-primary outline-none transition-colors">
            <p class="text-xs text-gray-500 mt-1">密码长度至少8位，包含字母和数字</p>
          </div>

          <div>
            <label for="confirmPassword" class="block text-sm font-medium text-gray-700 mb-1">确认新密码</label>
            <input type="password" id="confirmPassword" name="confirmPassword" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary/50 focus:border-primary outline-none transition-colors">
          </div>
        </form>
      </div>
      <div class="p-4 flex justify-end space-x-3">
        <button id="cancelPasswordBtn" class="px-4 py-2 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-50 transition-colors">取消</button>
        <button id="savePasswordBtn" class="px-4 py-2 bg-primary text-white rounded-lg hover:bg-primary/90 transition-colors">保存密码</button>
      </div>
    </div>
  </div>

  <!-- JavaScript -->
  <script>
    // 显示提示消息
    function showToast(message) {
      const toastMessage = document.getElementById('toastMessage');
      const successToast = document.getElementById('successToast');

      toastMessage.textContent = message;
      successToast.classList.remove('translate-y-20', 'opacity-0');
      successToast.classList.add('translate-y-0', 'opacity-100');

      setTimeout(() => {
        successToast.classList.remove('translate-y-0', 'opacity-100');
        successToast.classList.add('translate-y-20', 'opacity-0');
      }, 3000);
    }

    // 显示确认对话框
    function showConfirmDialog(title, message, confirmCallback) {
      const dialog = document.getElementById('confirmDialog');
      const dialogTitle = document.getElementById('dialogTitle');
      const dialogMessage = document.getElementById('dialogMessage');
      const dialogConfirm = document.getElementById('dialogConfirm');
      const dialogCancel = document.getElementById('dialogCancel');

      dialogTitle.textContent = title;
      dialogMessage.textContent = message;

      // 显示对话框
      dialog.classList.remove('opacity-0', 'pointer-events-none');
      dialog.querySelector('div').classList.remove('scale-95');
      dialog.querySelector('div').classList.add('scale-100');

      // 确认按钮事件
      const confirmHandler = () => {
        confirmCallback();
        hideConfirmDialog();
        dialogConfirm.removeEventListener('click', confirmHandler);
        dialogCancel.removeEventListener('click', cancelHandler);
      };

      // 取消按钮事件
      const cancelHandler = () => {
        hideConfirmDialog();
        dialogConfirm.removeEventListener('click', confirmHandler);
        dialogCancel.removeEventListener('click', cancelHandler);
      };

      dialogConfirm.addEventListener('click', confirmHandler);
      dialogCancel.addEventListener('click', cancelHandler);
    }

    // 隐藏确认对话框
    function hideConfirmDialog() {
      const dialog = document.getElementById('confirmDialog');
      dialog.classList.add('opacity-0', 'pointer-events-none');
      dialog.querySelector('div').classList.remove('scale-100');
      dialog.querySelector('div').classList.add('scale-95');
    }

    // 显示密码修改模态框
    function showPasswordModal() {
      const modal = document.getElementById('passwordModal');
      modal.classList.remove('opacity-0', 'pointer-events-none');
      modal.querySelector('div').classList.remove('scale-95');
      modal.querySelector('div').classList.add('scale-100');
    }

    // 隐藏密码修改模态框
    function hidePasswordModal() {
      const modal = document.getElementById('passwordModal');
      modal.classList.add('opacity-0', 'pointer-events-none');
      modal.querySelector('div').classList.remove('scale-100');
      modal.querySelector('div').classList.add('scale-95');
    }

    // 设置导航切换
    const settingNavLinks = document.querySelectorAll('.setting-nav-link');
    const settingSections = document.querySelectorAll('main section');

    settingNavLinks.forEach(link => {
      link.addEventListener('click', function(e) {
        e.preventDefault();

        // 移除所有导航链接的活跃状态
        settingNavLinks.forEach(navLink => {
          navLink.classList.remove('text-primary', 'bg-primary/5');
          navLink.classList.add('text-gray-600', 'hover:bg-gray-50');
          navLink.querySelector('.setting-icon').classList.remove('bg-primary/10', 'text-primary');
          navLink.querySelector('.setting-icon').classList.add('bg-gray-100', 'text-gray-600');
        });

        // 添加当前导航链接的活跃状态
        this.classList.add('text-primary', 'bg-primary/5');
        this.classList.remove('text-gray-600', 'hover:bg-gray-50');
        this.querySelector('.setting-icon').classList.add('bg-primary/10', 'text-primary');
        this.querySelector('.setting-icon').classList.remove('bg-gray-100', 'text-gray-600');

        // 获取目标部分ID
        const targetId = this.getAttribute('href').substring(1);

        // 隐藏所有部分
        settingSections.forEach(section => {
          section.classList.add('hidden');
        });

        // 显示目标部分
        document.getElementById(targetId).classList.remove('hidden');
      });
    });

    // 头像上传预览
    const changeAvatarBtn = document.getElementById('changeAvatarBtn');
    const avatarInput = document.getElementById('avatarInput');
    const avatarPreview = document.getElementById('avatarPreview');

    changeAvatarBtn.addEventListener('click', () => {
      avatarInput.click();
    });

    avatarInput.addEventListener('change', (e) => {
      if (e.target.files && e.target.files[0]) {
        const reader = new FileReader();

        reader.onload = (e) => {
          avatarPreview.src = e.target.result;
          showToast('头像已更新，点击保存后生效');
        };

        reader.readAsDataURL(e.target.files[0]);
      }
    });

    // 表单提交处理
    document.getElementById('profileForm').addEventListener('submit', (e) => {
      e.preventDefault();
      showToast('个人资料已更新');
    });

    // 取消个人资料修改
    document.getElementById('cancelProfileBtn').addEventListener('click', () => {
      showConfirmDialog('取消修改', '确定要放弃当前修改吗？未保存的内容将丢失。', () => {
        // 这里可以添加重置表单的逻辑
        showToast('已取消修改');
      });
    });

    // 保存通知设置
    document.getElementById('saveNotificationsBtn').addEventListener('click', () => {
      showToast('通知设置已保存');
    });

    // 重置通知设置
    document.getElementById('resetNotificationsBtn').addEventListener('click', () => {
      showConfirmDialog('重置通知设置', '确定要将通知设置恢复为默认值吗？', () => {
        showToast('通知设置已重置为默认值');
      });
    });

    // 保存隐私设置
    document.getElementById('savePrivacyBtn').addEventListener('click', () => {
      showToast('隐私设置已保存');
    });

    // 保存偏好设置
    document.getElementById('savePreferencesBtn').addEventListener('click', () => {
      showToast('偏好设置已保存');
    });

    // 重置偏好设置
    document.getElementById('resetPreferencesBtn').addEventListener('click', () => {
      showConfirmDialog('重置偏好设置', '确定要将偏好设置恢复为默认值吗？', () => {
        showToast('偏好设置已重置为默认值');
      });
    });

    // 导出数据
    document.getElementById('exportDataBtn').addEventListener('click', () => {
      showToast('数据导出已开始，完成后将自动下载');
    });

    // 删除部分数据
    document.getElementById('deleteDataBtn').addEventListener('click', () => {
      showConfirmDialog('删除部分数据', '确定要删除部分数据吗？删除后无法恢复。', () => {
        showToast('已开始删除所选数据');
      });
    });

    // 暂时停用账号
    document.getElementById('deactivateAccountBtn').addEventListener('click', () => {
      showConfirmDialog('暂时停用账号', '确定要暂时停用账号吗？停用期间您将无法登录，但所有数据会被保留。', () => {
        showToast('账号已暂时停用');
      });
    });

    // 永久删除账号
    document.getElementById('deleteAccountBtn').addEventListener('click', () => {
      showConfirmDialog('永久删除账号', '警告：此操作将永久删除您的账号及所有数据，且无法恢复。确定要继续吗？', () => {
        showToast('账号删除申请已提交，将在30天后生效');
      });
    });

    // 修改密码相关
    document.getElementById('changePasswordBtn').addEventListener('click', showPasswordModal);
    document.getElementById('closePasswordModal').addEventListener('click', hidePasswordModal);
    document.getElementById('cancelPasswordBtn').addEventListener('click', hidePasswordModal);

    document.getElementById('savePasswordBtn').addEventListener('click', () => {
      const newPassword = document.getElementById('newPassword').value;
      const confirmPassword = document.getElementById('confirmPassword').value;

      if (newPassword !== confirmPassword) {
        showToast('两次输入的密码不一致', 'error');
        return;
      }

      if (newPassword.length < 8) {
        showToast('密码长度至少为8位', 'error');
        return;
      }

      hidePasswordModal();
      showToast('密码已成功修改，请重新登录');
    });

    // 主题模式切换
    document.getElementById('themeMode').addEventListener('change', (e) => {
      const mode = e.target.value;

      if (mode === 'dark') {
        document.body.classList.add('dark-mode');
        showToast('已切换至深色模式');
      } else if (mode === 'light') {
        document.body.classList.remove('dark-mode');
        showToast('已切换至浅色模式');
      } else {
        showToast('已切换至跟随系统模式');
      }
    });
  </script>


</body></html>